<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>配送司机</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="${siteurl}bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${siteurl}plugins/FontAwesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${siteurl}plugins/ionicons201/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${siteurl}dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${siteurl}dist/css/skins/_all-skins.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    [#include "/admin/common/commons.html"]

	<link rel="stylesheet" href="${siteurl}plugins/vue-element/element.css">

</head>
<style>
    .content {
        padding: 0;
    }

    ul {
        padding: 0;
        margin: 0;
        padding: 0;
        margin: 0;
        list-style: none;
        overflow: hidden;
    }

    /* 导航 */
    .navigation {
        height: 60px;
        line-height: 60px;
        background-color: #f9f9f9;
        font-size: 14px;
        color: #666666;
        padding-left: 16px;
    }

    .navigation i {
        color: #d9dee5;
    }

    .navigation span {
        font-weight: 700;
    }

    .results {
        padding: 10px;
        background-color: #fff;
    }

    .search {
        height: 75px;
        background-color: #f9f9f9;
        padding: 20px 10px;
    }

    .table li {
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        border-bottom: 2px solid #fff;
        float: left;
        font-size: 12px;
        width: 85px;
        text-align: center;
        cursor: pointer;
    }

    .table .curren {
        border-bottom-color: #5491de;
        color: #5491de;
    }

    .order {
        color: #5491de;
        cursor: pointer;
    }

    .combined {
        height: 40px;
        line-height: 40px;
    }

    .combined span {
        display: inline-block;
        font-size: 12px;
        color: #7f6666;
        margin-right: 40px;
    }

    [v-cloak]{
        display: none;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">

    <header class="main-header">
        <!-- Header Navbar: style can be found in header.less -->
        [#include "/admin/common/nav.html"]
    </header>

    <!-- =============================================== -->

    <!-- Left side column. contains the sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            [@user_panel /]
            <!-- search form -->
            [@sidebar_form /]
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">主面板</li>
                [@menustag id=1]
                [#list list as item]
                [@menu item "1,104,107"]
                [/@menu]
                [/#list]
                [/@menustag]
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- =============================================== -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <!-- Main content -->
        <section class="content">
            <!-- Default box -->

            <!-- 导航 -->
            <div class="navigation">
                数据<i> / </i> <span>业绩分析</span>
            </div>
            
            <div v-cloak class="results" id="app">
                
                <!-- 搜索 -->
                <div class="search">
                    <div>
                        <el-select style="width: 200px;" v-model="options[0].value" size="small" placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                        <el-date-picker
                        style="margin-left: 18px;"
                        v-model="value1"
                        size="small"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                        <el-input style="margin-left: 18px;width: 200px;" v-model="input" size="small" placeholder="请输入姓名/手机号"></el-input>
                        <div style="float: right;">
                            <el-button type="primary" size="small">搜索</el-button>
                            <el-button plain size="small">清除条件</el-button>
                        </div>
                    </div>
                </div>

                <!-- tab切换 -->
                <div class="table">
                    <ul>
                        <li @click="tabToggle(index)" v-for="(item, index) in tableList" :key="index" :class="[item.state ? 'curren' : '']">{{item.text}}</li>
                    </ul>
                </div>

                <el-table
                    :data="tableData"
                    style="width: 100%"
                    size="small"
                    @cell-click="click"
                    :header-cell-style="{background:'#f7f7f7',color:'#666666'}"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                    <el-table-column
                    prop="name"
                    label="姓名"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="phone"
                    label="手机号码"
                    sortable
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="group"
                    label="组别"
                    sortable
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="newCustomer"
                    label="拓新客户数"
                    sortable
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="order"
                    label="下单数"
                    class-name="order"
                    sortable
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="orderPrice"
                    label="下单总额(元)"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="salesPrice"
                    label="销售总额(元)">
                    </el-table-column>
                </el-table>
                <div class="combined">
                    <span>拓新客户总数：0</span>
                    <span>下单数：0</span>
                    <span>销售总额：0.00元</span>
                </div>
                <div class="page" style="text-align: right;">
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    pager-count="5"
                    :total="1000">
                    </el-pagination>
                </div>

                <el-dialog title="下单详情" :visible.sync="dialogTableVisible">
                    <el-table :data="gridData" :header-cell-style="{background:'#f7f7f7',color:'#666666'}">
                        <el-table-column property="name" label="客户名称" width="150"></el-table-column>
                        <el-table-column property="phone" label="手机号码" width="200"></el-table-column>
                        <el-table-column property="order" label="下单数"></el-table-column>
                        <el-table-column property="orderPrice" label="下单总额(元)"></el-table-column>
                    </el-table>
                </el-dialog>
            </div>

            <!-- /.box -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    [#include "/admin/common/footer.html"]

    <!-- Control Sidebar -->
    [#include "/admin/common/aside.html"]

    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="${siteurl}plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="${siteurl}bootstrap/js/bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="${siteurl}plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="${siteurl}plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${siteurl}dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="${siteurl}dist/js/list.js"></script>

<!-- import Vue before Element -->
<script src="${siteurl}plugins/vue-element/vue.js"></script>
<!-- import JavaScript -->
<script src="${siteurl}plugins/vue-element/element.js"></script>

<script src="${siteurl}dist/js/echarts.js"></script>

<script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return {
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            value: '',
            value1: '',
            input: '',
            tableList: [
                {
                    text: '客情维系',
                    state: true
                },
                {
                    text: '商品销售',
                    state: false
                }
            ],
            tableData: [{
                name: '贾魁',
                phone: '13468844686',
                group: '销售部',
                newCustomer: '3',
                order: '3',
                orderPrice: '25.00',
                salesPrice: '99.00'
                }, {
                    name: '贾魁',
                    phone: '13468844686',
                    group: '销售部',
                    newCustomer: '3',
                    order: '3',
                    orderPrice: '25.00',
                    salesPrice: '99.00'
                }, {
                    name: '贾魁',
                    phone: '13468844686',
                    group: '销售部',
                    newCustomer: '3',
                    order: '3',
                    orderPrice: '25.00',
                    salesPrice: '99.00'
                }, {
                    name: '贾魁',
                    phone: '13468844686',
                    group: '销售部',
                    newCustomer: '3',
                    order: '3',
                    orderPrice: '25.00',
                    salesPrice: '99.00'
            }],
            dialogTableVisible: false,
            gridData: [{
                name: '贾魁',
                phone: '13468844686',
                order: '3',
                orderPrice: '25.00'
            }, {
                name: '贾魁',
                phone: '13468844686',
                order: '3',
                orderPrice: '25.00'
            }, {
                name: '贾魁',
                phone: '13468844686',
                order: '3',
                orderPrice: '25.00'
            }, {
                name: '贾魁',
                phone: '13468844686',
                order: '3',
                orderPrice: '25.00'
            }]
        }
      },
      created: function () {
        var contentWrapperHeight = $(".content-wrapper").height();
        var navigationHeight = $(".navigation").height();
        var mainHeaderHeight = $(".main-header").height();
        var mainFooterHeight = $(".main-footer").height();
        var mainFooterPaddingTop = $(".main-footer").css("padding-top");
        var mainFooterPaddingBottom = $(".main-footer").css("padding-bottom");
        var height = contentWrapperHeight - navigationHeight - mainHeaderHeight - mainFooterHeight - parseInt(mainFooterPaddingTop) - parseInt(mainFooterPaddingBottom) - 21;
        console.log(contentWrapperHeight, navigationHeight, mainHeaderHeight, mainFooterHeight, mainFooterPaddingTop, mainFooterPaddingBottom);
        $(".results").height(height);
      },
	  methods: {
        tabToggle: function (index) {
            console.log(event);
            this.tableList.forEach((item, idx) => {
                if(index == idx) {
                    item.state = true;
                } else {
                    item.state = false;
                }
            })
        },
        click: function (event) {
            console.log(event);
            this.dialogTableVisible = true;
        }
      }
    })
  </script>

</body>
</html>
